<template>
  <div id="goods_id">
    <div class="goods_top">
      <p class="goods_note">
        注:
        <br />1.增加的新栏目为当前栏目下一行
        <br />2.修改完的栏目一行需保存后提交审批才能生效
      </p>
      <div class="goods_add">
        <el-button size="mini" round @click="add_goods">增加</el-button>
      </div>
    </div>

    <el-table :data="Good_list" border style="width: 100%">
      <el-table-column fixed prop="id" label="ID" width="150"></el-table-column>
      <el-table-column prop="firstcatename" label="一级分类" width="120"></el-table-column>
      <el-table-column prop="secondcatename" label="二级分类" width="120"></el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="120"></el-table-column>
      <el-table-column prop="img" label="商品照片" width="300" v-slot="$props">
        <img width="100" :src="'http://127.0.0.1:3000/'+$props.row.img" alt />
      </el-table-column>
      <el-table-column prop="price" label="零售价格" width="120"></el-table-column>
      <el-table-column prop="market_price" label="市场价格" width="120"></el-table-column>
      <el-table-column prop="isnew" label="是否新品" width="120" v-slot="$props">
        <template>
          <el-switch
            :active-value="1"
            :inactive-value="2"
            active-color="#13ce66"
            inactive-color="#ff4949"
            v-model="$props.row.isnew"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖" width="120" v-slot="$props">
        <template>
          <el-switch
            v-model="$props.row.ishot"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120" v-slot="$props">
        <template>
          <el-button size="mini" type="success" round v-if="$props.row.status==1">正常</el-button>
          <el-button type="danger" size="mini" round v-else>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" v-slot="$props">
        <template>
          <el-button size="mini" type="danger" round @click="del_goods($props.row.id)">删除</el-button>
          <el-button size="mini" type="warning" round @click="setgoods($props.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="totals"
      :total="total"
      :page-size="size"
    ></el-pagination>
    <AddGoods ref="setgood_list" @reload_goods="reload_goods" :isShow="isShow"></AddGoods>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import AddGoods from "../views/AddGoods.vue";
export default {
  data() {
    return {
      isShow: { flig: false },
      page: 1,
      size: 5
    };
  },
  created() {
    this.GoodsAction({ page: this.page, size: this.size });
    this.GoodsAction_list();
  },
  methods: {
    del_goods(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });

          this.$http.post("/goodsdelete", { id }).then(res => {
            if (res.code == 200) {
              this.GoodsAction({ page: this.page, size: this.size });
              this.GoodsAction_list();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    setgoods(obj) {
      this.isShow.flig = true;
      delete obj.firstcatename;
      delete obj.secondcatename;
      this.$refs.setgood_list.set_list(obj);
    },
    reload_goods() {
      this.GoodsAction({ page: this.page, size: this.size });
      this.GoodsAction_list();
    },
    add_goods() {
      //添加
      //打开模态框
      this.isShow.flig = true;
    },
    totals(total_list) {
      this.page = total_list;
      this.GoodsAction({ page: this.page, size: this.size });
      this.GoodsAction_list();
    },
    ...mapActions("GoodsStory", ["GoodsAction", "GoodsAction_list"])
  },
  computed: {
    ...mapState({
      Good_list: state => state.GoodsStory.Good_list,
      total: state => state.GoodsStory.total
    })
  },
  components: {
    AddGoods
  }
};
</script>

<style>
#goods_id .goods_top {
  display: flex;
  justify-content: space-between;
}
#goods_id .goods_note {
  font-size: 12px;
  color: #c4c4c4;
  text-align: left;
}
#goods_id .goods_add > button {
  width: 80px;
  color: #ff5d3e;
  background-color: white;
  text-align: center;
}
</style>